<!--
 * @Author: your name
 * @Date: 2020-09-21 07:44:10
 * @LastEditTime: 2020-11-16 15:26:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \supplyweb\src\components\header\index.vue
-->
<!--  -->
<template>
  <div class="footer_containt">
    <div class="fLinks-tips" style="display: block;">
      <div class="fLinksTips-inner">
        <div class="links" v-show="NavIndex ==1" :class="NavIndex == 1?'active_nav_index':''" @mouseleave="leave(3)">
          <a href="http://www.szlhq.gov.cn/bmxxgk/jwjw/index.html" target="_blank">纪委监委</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/qwzfb/index.html" target="_blank">区委（政府）办公室</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/lhqwzzbbb/index.html" target="_blank">龙华区委组织部</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/qwxcbwhtyj/index.html" target="_blank">区委宣传部</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/qwzfw/index.html" target="_blank">区委政法委</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/fzhggjtjj/index.html" target="_blank">发展和改革局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/jyj/index.html" target="_blank">教育局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/kjcxj/index.html" target="_blank">科技创新局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/jjcjj/index.html" target="_blank">工业和信息化局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/mzjrlzyj/index.html" target="_blank">民政局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/sfj/index.html" target="_blank">司法局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/czjgzw/index.html" target="_blank">财政局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/rlzyj/index.html" target="_blank">人力资源局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/zfhjsj/index.html" target="_blank">住房和建设局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/swj/index.html" target="_blank">水务局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/whgdlytyj/index.html" target="_blank">文化广电旅游体育局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/wshjhsyj/index.html" target="_blank">卫生健康局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/tyjrswj/index.html" target="_blank">退役军人事务局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/aqscjdglj/index.html" target="_blank">应急管理局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/sjj/index.html" target="_blank">审计局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/gyzcjdglj_173525/index.html" target="_blank">国有资产监督管理局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/tjj_172260/index.html" target="_blank">统计局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/csglj/index.html" target="_blank">城市管理和综合执法局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/xfj/index.html" target="_blank">信访局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/zwfwj/index.html" target="_blank">政务服务数据管理局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/csgxj/index.html" target="_blank">城市更新和土地整备局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/qtgzb/index.html" target="_blank">群团工作部</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/ghtdjcj/index.html" target="_blank">规划土地监察局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/jzgwj/index.html" target="_blank">建筑工务署</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/qqb/index.html" target="_blank">前期中心（轨道中心）</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/sqwgglbgs/index.html" target="_blank">社区网格管理中心</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/zdpqghjsglbgs/index.html" target="_blank">重点区域建设推进中心</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/hjhszx/index.html" target="_blank">会计核算中心</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/gafj/index.html" target="_blank">龙华公安分局</a>
          <a href="http://www.szlhq.gov.cn/bmxxgk/sschzljgwlhj/index.html" target="_blank">市市场监督管理局龙华监管局</a>
        </div>
        <div class="links" v-show="NavIndex == 2" @mouseleave="leave(3)">
          <a href="http://www.szlhq.gov.cn/jdbxxgkml/ghjdb/index.html" target="_blank">观湖街道办</a>
          <a href="http://www.szlhq.gov.cn/jdbxxgkml/mzjdb/index.html" target="_blank">民治街道办</a>
          <a href="http://www.szlhq.gov.cn/jdbxxgkml/lhjdb/index.html" target="_blank">龙华街道办</a>
          <a href="http://www.szlhq.gov.cn/jdbxxgkml/dljdb/index.html" target="_blank">大浪街道办</a>
          <a href="http://www.szlhq.gov.cn/jdbxxgkml/fcjdb/index.html" target="_blank">福城街道办</a>
          <a href="http://www.szlhq.gov.cn/jdbxxgkml/gljdb/index.html" target="_blank">观澜街道办</a>
        </div>
        <div class="links" v-show="NavIndex ==3" :class="NavIndex == 3?'active_nav_index':''" @mouseleave="leave(3)">
          <a href="http://www.szft.gov.cn/" target="_blank">福田区</a>
          <a href="http://www.szlh.gov.cn/" target="_blank">罗湖区</a>
          <a href="http://www.yantian.gov.cn/cn/" target="_blank">盐田区</a>
          <a href="http://www.szns.gov.cn/" target="_blank">南山区</a>
          <a href="http://www.baoan.gov.cn/" target="_blank">宝安区</a>
          <a href="http://www.lg.gov.cn/" target="_blank">龙岗区</a>
          <a href="http://www.szpsq.gov.cn/" target="_blank">坪山区</a>
          <a href="http://www.szgm.gov.cn/" target="_blank">光明区</a>
          <a href="http://www.dpxq.gov.cn/" target="_blank">大鹏新区</a>
        </div>
        <div class="pic-links" style="display: none;">
          <p class="picP-xt" style="text-align:center;fongt-size:20px;"> 因网站页面优化调整，现服务系统链接已迁移至业务所在部门页面，不便之处，敬请谅解。 </p>
        </div>
      </div>
    </div>
    <!-- <img src="@/assets/images/footer/footer.png" alt=""> -->
    <div class=" wh-1200 footer_main">

      <div class="flex top_nav">
        <div class="item_flex_nav" :class="NavIndex == 1?'active_nav_index':''">
          <span @mouseenter="enter(1)">
            <span class="item_title">区各部门</span>
            <a-icon type="caret-down" />
          </span>
        </div>
        <div class="item_flex_nav tc" :class="NavIndex == 2?'active_nav_index':''">
          <span @mouseenter="enter(2)">
            <span class="item_title">区街道办</span>
            <a-icon type="caret-down" />
          </span>
        </div>
        <div class="item_flex_nav tr" :class="NavIndex == 3?'active_nav_index':''">
          <span @mouseenter="enter(3)">
            <span class="item_title">区各政府网站</span>
            <a-icon type="caret-down" />
          </span>
        </div>
      </div>
      <div class="ft_contant" @mouseleave="leave(9)" @mouseenter="enter(9)">
        <div class="flex">
          <div class="flex-1">
            <!-- <div class="site_nav">
              <a href="javascript:void(0);">关于我们<span class="mr-16 ml-16">| </span></a>
              <a href="javascript:void(0);">网站地图<span class="mr-16 ml-16">| </span></a>
              <a href="javascript:void(0);">使用帮助<span class="mr-16 ml-16">| </span></a>
              <a href="javascript:void(0);">版权保护<span class="mr-16 ml-16">| </span></a>
              <a href="javascript:void(0);">隐私声明</a>
            </div> -->
            <p>深圳市龙华区人民政府办公室主办</p>
            <p>备案许可证号：粤ICP备17147563号-1 网站标识码：4403920006</p>
            <p>
              <a class="jump_a" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030902000263" target="blank" title="粤公网安备44030902000263号">
                <img class="site_icon" src="@/assets/images/footer/site_icon.png" alt="粤公网安备44030902000263号" /> 粤公网安备44030902000263号
              </a>
            </p>
          </div>
          <div class="flex-1 tr">
            <div class="flex">
              <div class="flex-1 r_title">
                <p>执法投诉电话：23761792，执法投诉邮箱：fazhiban@szlhq.gov.c</p>
                <p>执法投诉地址：深圳市龙华区龙华街道清泉路7号龙华区富康行政服务办公区</p>
              </div>
              <a href="http://bszs.conac.cn/sitename?method=show&amp;id=278CB4A58F6C2E73E053012819AC872B" title="党政机关" target="_blank">
              <img class="site_img" vspace="0" hspace="0" border="0" src="@/assets/images/footer/garment.png"  alt="党政机关"></a>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      NavIndex: 0,
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    Move() {
      this.NavIndex = 1;
    },
    enter(index) {
      console.log("进");
      this.NavIndex = index;
    },
    leave() {
      this.NavIndex = 9;
    },
  },
  created() {},
};
</script>
<style lang='less' scoped>
.footer_containt {
  width: 100%;
  background-color: #282828;
  color: #909399;
  padding-top: 24px;
  height: 199px;
  position: relative;
  .fLinks-tips {
    position: absolute;
    bottom: 199px;
    left: 0;
    height: auto;
    width: 100%;
    background-color: #fff;
    z-index: 99999999;
    .links {
      width: 100%;
      padding: 20px 0;
    }
    box-shadow: 1px -9px 9px rgba(166, 196, 241, 0.2);
    .fLinksTips-inner {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      a {
        width: 25%;
        display: inline-block;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40px;
        letter-spacing: 0px;
        color: #909399;
        text-align: center;
        &:hover {
          color: #000;
        }
      }
    }
  }
  .footer_main {
  }

  // margin-top:100px;
  .site_icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
  }
  .r_title {
  }
  .top_nav {
    padding-bottom: 16px;
    border-bottom: 2px solid #303133;
    .item_flex_nav {
      flex: 1;
      cursor: pointer;
      .item_title {
        margin-right: 8px;
      }
    }
  }

  .ft_contant {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 25px;
    letter-spacing: 0px;
    color: #909399;
    padding-top: 24px;
    .site_img {
      width: auto;
      height: 60px;
      vertical-align: top;
      background-image: linear-gradient(90deg);
      margin-left: 16px;
      cursor: pointer;
      margin-top: -8px;
    }
    p {
      cursor: pointer;
    }
    .site_nav {
      a {
        color: #909399;
        border-right: 1px solid #303133;
      }
    }
  }
}
.active_nav_index {
  .item_title,
  i {
    color: #fff !important;
  }
}
.jump_a {
  color: #909399 !important;
}
</style>